<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>菜单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script src="./js/global.js"></script>
    <script src="./js/config.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">系统基础</a>
                <a>
                    <cite>系统菜单</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="菜单名" name="cate_name"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon"></i>增加</button>
                        </div>
                    </form>
                    <hr>
                    <blockquote class="layui-elem-quote">系统重要板块</i></blockquote>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn" onclick="xadmin.open('添加顶级菜单','./menu-top-add.html',800,600)"><i class="layui-icon"></i>添加顶级菜单</button>
                </div>

                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th width="20">
                                <input type="checkbox" name="" lay-skin="primary">
                            </th>
                            <th width="70">ID</th>
                            <th>菜单名</th>
                            <th width="50">排序</th>
                            <th width="80">状态</th>
                            <th width="250">操作</th>
                        </thead>
                        <tbody class="x-cate">
                        <!-- 二级分类4个空格,之后每增加一级增加个空格 -->


                        </tbody>
                    </table>
                </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'layer','jquery','request'], function(){
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;
        var request = layui.request;
        var adminToken = localStorage.getItem("adminToken");

        //获得get参数
        var $_GET = (function(){
            var url = window.document.location.href.toString();
            var u = url.split("?");
            if(typeof(u[1]) == "string"){
                u = u[1].split("&");
                var get = {};
                for(var i in u){
                    var j = u[i].split("=");
                    get[j[0]] = j[1];
                }
                return get;
            } else {
                return {};
            }
        })();

        request.ajax(requestUri+'/admin/system/menu/getmenutree', 'get', 'json', {
            'token': adminToken
        }, function (req) {
            var str='';
            str = menuTree(req.data);
            $('.x-cate').html(str);

            $("tbody.x-cate tr[fid!='0']").hide();
            // 栏目多级显示效果
            $('.x-show').click(function () {
                if($(this).attr('status')=='true'){
                    $(this).html('&#xe625;');
                    $(this).attr('status','false');
                    cateId = $(this).parents('tr').attr('cate-id');
                    $("tbody tr[fid="+cateId+"]").show();
                }else{
                    cateIds = [];
                    $(this).html('&#xe623;');
                    $(this).attr('status','true');
                    cateId = $(this).parents('tr').attr('cate-id');
                    getCateId(cateId);
                    for (var i in cateIds) {
                        $("tbody tr[cate-id="+cateIds[i]+"]").hide().find('.x-show').html('&#xe623;').attr('status','true');
                    }
                }
            })
        },function (req) {
        });
    });

    function menuTree(arr) {
        var str = '';
        $.each(arr,function(i,item){
            var childNum = item.children.length;
            if(item.level == 1){
                var num = 0;
            }else if(item.level ==2){
                var num = 4;
            }else {
                var num = (item.level - 1) * 4 + 1;
            }
            if ( childNum > 0 && item.level < 3){
                str+='<tr cate-id=\''+item.id+'\' fid=\''+item.pid+'\'>';
                str+='<td>';
                str+='<input type=\"checkbox\" name=\"\" lay-skin=\"primary\">';
                str+='</td>';
                str+='<td>'+item.id+'</td>';
                str+='<td>';
                var d ="&nbsp;";
                str+= d.repeat(num);
                str+='<i class=\"layui-icon x-show\" status=\'true\'>&#xe623;</i>';
                str+=item.title;
                str+='</td><td>';
                str+='<input type=\"text\" class=\"layui-input x-sort\" name=\"order\" value=\"'+item.sort+'\"></td>';
                str+='<td>';
                if(item.status == 1){
                    str+='开启';
                }else {
                    str+='关闭';
                }
                str+='</td>';
                str+='<td class=\"td-manage\">';
                str+='<button class=\"layui-btn layui-btn layui-btn-xs\"  onclick=\"xadmin.open(\'编辑\',\'menu-edit.html?id='+item.id+'\')\" ><i class=\"layui-icon\">&#xe642;</i>编辑</button>';
                str+='<button class=\"layui-btn layui-btn-warm layui-btn-xs\"  onclick=\"xadmin.open(\'添加子菜单\',\'menu-child-add.html?id='+item.id+'\')\" ><i class=\"layui-icon\">&#xe642;</i>添加子菜单</button>';
                str+='<button class=\"layui-btn-danger layui-btn layui-btn-xs\"  onclick=\"member_del(this,\''+item.id+'\')\" href=\"javascript:;\" ><i class=\"layui-icon\">&#xe640;</i>删除</button>';
                str+='</td></tr>';
                str+=menuTree(item.children);
            }else {

                str+='<tr cate-id=\''+item.id+'\' fid=\''+item.pid+'\'>';
                str+='<td>';
                str+='<input type=\"checkbox\" name=\"\" lay-skin=\"primary\">';
                str+='</td>';
                str+='<td>'+item.id+'</td>';
                str+='<td>';
                var d = "&nbsp;";
                str+= d.repeat(num);
                str+='├'+ item.title;
                str+='</td><td>';
                str+='<input type=\"text\" class=\"layui-input x-sort\" name=\"order\" value=\"'+item.sort+'\"></td>';
                str+='<td>';
                if(item.status == 1){
                    str+='开启';
                }else {
                    str+='关闭';
                }
                str+='</td>';
                str+='<td class=\"td-manage\">';
                str+='<button class=\"layui-btn layui-btn layui-btn-xs\"  onclick=\"xadmin.open(\'编辑\',\'menu-edit.html?id='+item.id+'\')\" ><i class=\"layui-icon\">&#xe642;</i>编辑</button>';
                str+='<button class=\"layui-btn layui-btn-warm layui-btn-xs\"  onclick=\"xadmin.open(\'添加子菜单\',\'menu-child-add.html?id='+item.id+'\')\" ><i class=\"layui-icon\">&#xe642;</i>添加子菜单</button>';
                str+='<button class=\"layui-btn-danger layui-btn layui-btn-xs\"  onclick=\"member_del(this,\''+item.id+'\')\" href=\"javascript:;\" ><i class=\"layui-icon\">&#xe640;</i>删除</button>';
                str+='</td></tr>';
            }
        });
        return str;
    }

    //重复字符串n次
    function repeat(str , n){
        return new Array(n+1).join(str);
    }

    /*用户-删除*/
    function member_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            //发异步删除数据
            layui.use([ 'form', 'layer','jquery','request'],
                function() {
                    $ = layui.jquery;
                    var form = layui.form,
                        layer = layui.layer;
                    var request = layui.request;
                    var adminToken = localStorage.getItem("adminToken");
                            //发异步，把数据提交给php
                            request.ajax(requestUri+'/admin/system/menu/deletemenu', 'get', 'json', {
                                'token': adminToken,
                                'id' : id
                            }, function (req) {
                                if(req.data.status == 1){
                                    $(obj).parents("tr").remove();
                                    layer.msg('已删除!',{icon:1,time:1000});
                                }
                                if(req.data.status == 0){
                                    layer.msg('有子分类不可删除');
                                }
                            },function (req) {
                                console.log(req);
                                layer.msg('不可删除');
                            });
                            return false;
                });
        });
    }

    var cateIds = [];
    function getCateId(cateId) {
        $("tbody tr[fid="+cateId+"]").each(function(index, el) {
            id = $(el).attr('cate-id');
            cateIds.push(id);
            getCateId(id);
        });
    }
</script>
</body>
</html>
